<script setup lang="ts">
import { getSubjectInfo } from '@/api/subject';
import type { Subject } from '@/api/subject/type';
import { onBeforeMount, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showToast } from 'vant';
import Top from './components/Top.vue';
import Body from './components/Body.vue';

const id = ref('');
const subject = ref({
    creator: {
        nickname: ''
    }
} as Subject);
const router = useRouter();
const route = useRoute();

onBeforeMount(() => {
    if (!Array.isArray(route.query.id)) {
        id.value = route.query.id as string;
        init();
    } else {
        showToast('题目集ID无效');
        router.push('/subject');
    }
})

const init = () => {
    getSubjectInfo(id.value).then((res) => {
        subject.value = res.data;
    }).catch(() => {
        showToast('获取题目集信息失败');
    });
}

const goToList = () => {
    router.push('/subject');
}
</script>

<template>
    <div class="subject-home">
        <div class="subject-header">
            <div class="back-action" @click="goToList">
                <van-icon name="arrow-left" />
                <span>返回题目集列表</span>
            </div>
        </div>
        
        <div class="subject-content">
            <Top v-model="subject" />
            <Body />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.subject-home {
    display: flex;
    flex-direction: column;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    
    .subject-header {
        margin-bottom: 24px;
        
        .back-action {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #606266;
            cursor: pointer;
            padding: 8px 0;
            font-size: 14px;
            margin-bottom: 16px;
            
            &:hover {
                color: #409eff;
            }
        }
    }
    
    .subject-content {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .subject-content .subject-info {
        flex-direction: column;
        
        .subject-avatar {
            width: 100%;
            height: 200px;
        }
    }
}
</style>